$(function () {
	let magnifierRender = (function () {
		// 获取元素
		let $magnifierBox = $('.magnifierBox'),
			$smallImgBox = $magnifierBox.children('.smallImgBox'),
			$markBox = $smallImgBox.children('.markBox'),
			$bigImgBox = $magnifierBox.children('.bigImgBox'),
			$bigImg = $bigImgBox.children('img');
			
			// 1. 鼠标进入、离开及移动事件处理
			let magnifierRun = function magnifierRun() {
				$smallImgBox.on('mouseenter', function (ev) {
					$markBox.add($bigImgBox).css('display', 'block');
					magnifierEffect(ev);
				}).on('mouseleave', function () {
					$markBox.add($bigImgBox).css('display', 'none');
				}).on('mousemove', function (ev) {
					// 在移动事件中运行放大镜效果
					magnifierEffect(ev);
				})
			};
			
			// 2. 放大镜效果
			let magnifierEffect = function magnifierEffect(ev) {
				// 由于移动时盒子的焦点是在中心位置，所以mark盒子外边框距离small盒子内边框的距离是：焦点到body的距离 - small盒子外边距距body的距离 - 盒子的宽/高的一半
				let curX = ev.pageX - $smallImgBox.offset().left - $markBox.outerWidth() / 2,
					curY = ev.pageY - $smallImgBox.offset().top - $markBox.outerWidth() / 2;
					minX = 0,
					minY = 0,
					maxX = $smallImgBox.outerWidth() - $markBox.outerWidth(),
					maxY = $smallImgBox.outerHeight() - $markBox.outerHeight();
				
				// 处理边界，让mark盒子始终在small盒子中间运动
				curX = curX < minX ? minX : (curX > maxX ? maxX : curX);
				curY = curY < minY ? minY : (curY > maxY ? maxY : curY);
				
				// 执行mark盒子的位置
				$markBox.css({
					'left': curX,
					'top' : curY
				});
				
				// 执行大图位置信息（按比例）
				$bigImg.css({
					'left': -curX * 3,
					'top' : -curY * 3
				});
			};

		return {
			init: function () {
				magnifierRun();
			}
		}
	})();
	magnifierRender.init();
})